<template>
    <div id="background">
        <el-container style="height:100%;" direction="vertical">
            <el-header id="registHead" >
                <el-row>
                    <el-col :span="1/2"> <img src="../../assets/icon/logo.png" style="margin: 10px auto;"></el-col>
					<el-col :span="4"> <span style="font-size: 25px;color: #FFFFFF;margin-left: 20px;line-height: 60px;white-space: nowrap;"><b>新职通企业端</b></span></el-col>
                    <el-col :span="1/2" :offset="16"><i class="el-icon-s-home" style="margin: 10px;font-size: 36px;color: #FFFFFF;" @click="goBack"></i></el-col>
                    <el-col :span="2"><span  style="font-size: 24px;color: #FFFFFF;line-height: 60px;white-space: nowrap;" @click="goBack"><b>返回首页</b></span></el-col>
                </el-row>
            </el-header>
            <el-main id="registMain">
                <div style=" position: relative;">
                <div class="registBox">
                    <div class="stepBar">
                        <el-steps :active="2" align-center>
                            <el-step title="填写基本信息" ></el-step>
                            <el-step title="前往邮箱激活" ></el-step>
                            <el-step title="完善企业资料" ></el-step>     
                        </el-steps>
                    </div>
                    <div style="margin-top:30px;" >
                        <el-row style="position:relative;">
                           <el-col :span="2" :offset="3" style="margin-top:14px;">
                               <i  class="el-icon-message" style="font-size:40px;color:#409EFF;"></i>
                           </el-col>
                           <el-col :span="18" style="height:100%;">
                               <el-row><span>感谢注册，邮件已发送至您的注册邮箱：</span></el-row>
                                <el-row><span>{{youXiang}}</span></el-row>
                                <el-row><span style="color:#909090">请进入邮箱查看邮件，并激活新职通后台管理账号</span></el-row>
                           </el-col>
                        </el-row>
                        <el-row style="margin-top:30px;">
                            <el-col :span="20" :offset="3">
                                <span>没有收到邮件？</span>
                            </el-col>
                            <el-col :span="20" :offset="3">
                                <el-row style="margin-top:5px;">
                                    <el-col :span="18"><span>1.请检查邮箱地址是否填写正确，您可以返回</span></el-col>
                                    <el-col :span="4"><span style="color:#409EFF;" @click="goToStep1" class="pointer">重新填写</span></el-col>
                                </el-row>
                                <el-row style="margin-top:5px;">
                                    <el-col :span="18"><span>2.请检查您的邮件垃圾箱</span></el-col>
                                </el-row>
                                <el-row style="margin-top:5px;">
                                    <el-col :span="18"><span>3.您也可以重新尝试</span></el-col>
                                    <el-col :span="4"><span style="color:#409EFF;" @click="yanZheng" class="pointer">重新发送</span></el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="margin-top:70px;">
                        <span class="juZhong">
                            <el-button type="primary" @click="goToStep3">我已激活</el-button>
                        </span>
                    </div>
                </div>
                </div>
            </el-main>
            <el-footer>
                <span style="float:right;color:#707070;margin-right:30px;">联系我们</span>
            </el-footer>
        </el-container>
    </div>    
</template>

<script>
export default {
    data(){
        return{
            youXiang:'XXXXXXXX@XX.COM',
            miMa:'',
            normalHeight:document.documentElement.clientHeight,
        }
    },
    mounted(){
        var youxiang=this.$route.query.email;
        this.youXiang=youxiang;

        var mima=this.$route.query.password;
        this.miMa=mima;


        var bg = document.getElementById("background");
        console.log("height:"+this.normalHeight);
        bg.style.height = this.normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("registMain");
        var headHeight=this.normalHeight/30 *3;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("registMain");
        var mainHeight=this.normalHeight/30 *24 ;
        main.style.height=mainHeight+"px";
    },
    methods:{
        goBack(){
            this.$router.push({
                path:'/',                 
            }) 
        },
        yanZheng(){
            var params='';
            params={
                emailType:'REGISTER',
                targetType:'COMPANY',
            }
            var data={
                username:this.youXiang,
                password:this.miMa,
            }
            var URL='http://47.101.180.43:8075/user/email'
                        this.$ajax({
                        method:'post',
                        url:URL,
                        data:data,
                        params: params
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.msg); 
                        }else{
                            console.log(response.data.msg); 
                            this.$notify.error({
                                message:response.data.msg
                            });
                        }
            
                    }).catch(error => {
                    console.log('邮箱验证失败');
                    });
        },
         goToStep1(){
             this.$router.push({
                path:'/companyPage/regist',
            })
         },
         goToStep3(){
            var data={
                username:this.youXiang,
                password:this.miMa,
            }
            var URL='http://47.101.180.43:8075/user/login'
                        this.$ajax({
                        method:'post',
                        url:URL,
                        data:data,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.msg); 
                            this.$router.push({
                                path:'/companyPage/registStep3',
                            })
                        }else{
                            console.log(response.data.msg); 
                            this.$notify.error({
                                message:'请先去邮箱激活'
                            });
                        }
            
                    }).catch(error => {
                    console.log('邮箱激活失败');
                    });
        },
    }
}
</script>

<style>
.pointer{
	cursor: pointer;
}
.juZhong{
    display:flex;
    align-items:center;
    justify-content:center
}
.registBox{
    top: 50%;
    left: 50%;
    margin-left: -300px;
    width:600px;
    height:500px;
    /* background-color: #4A4C5B; */
    position: absolute;

}
#registMain{
   
     background-color: #ffffff;
    /* height:580px; */
}
#registHead{
     background-color: #4A4C5B;
}
#background{
    background-color: #ffffff;
    height:100%;
}
</style>
